import { Card } from 'antd';
import { useState, useEffect, useRef } from 'react'
import * as echarts from 'echarts';
import { getOption } from './echartsOptions';
import qtPng from '../images/其他减灾资源.png'
import SouyeApi from '../../../../../../utils/apis/SouyeApi';
export default function Qyxzyjtjznl(props) {
    const chartRef = useRef();

    const [data,setData]=useState([])
    const [jzzyzl,setJzzyzl]=useState("企业、乡镇与家庭减灾能力")
    useEffect(()=>{
        SouyeApi.jzzy_find(jzzyzl).then(resp=>{
            if(!resp.data){
            setDatas(resp.data.map(e => {
                const a = {}
                a.name = e.jzzyxl
                a.value = e.count
                a.jzzyxl = e.jzzyxl
                return a
            }))}
        })
    },[jzzyzl])


    const [datas, setDatas] = useState([{
        name: '企业大型救援装备',
        jzzyxl: '企业大型救援装备资源',
        value: 0
    }, {
        name: '保险和再保险企业',
        jzzyxl: '保险和再保险企业综合减灾资源（能力）',
        value: 0
    }, {
        name: '社会应急力量',
        jzzyxl: '社会应急力量综合减灾资源',
        value: 0
    }, {
        name: '乡镇减灾资源',
        jzzyxl: '乡镇（街道）综合减灾资源（能力）',
        value: 0
    }, {
        name: '村社减灾资源',
        jzzyxl: '社区（行政村）综合减灾资源（能力）',
        value: 0
    }, {
        name: '家庭减灾资源',
        jzzyxl: '家庭减灾资源',
        value: 0
    }])

    useEffect(() => {
        const chart = echarts.init(chartRef.current);
        const option = getOption(datas);
        chart.setOption(option)
    }, [datas])

    return <>
        <Card title={<div className='layout-h center'>
            <img src={qtPng} alt='' style={{
                width: 22,
                marginRight: 8
            }} />
            <div>企业、乡镇与家庭减灾能力</div>
        </div>} bordered={false} bodyStyle={{
            height: 300
        }}>
            <div className='wh100' ref={chartRef}></div>
        </Card>
    </>;
}